<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    // ES5 传统的数组取值  => 取出数组中的元素 赋值给变量a b c
    // var list = [1, 2, 3];
    // var a = list[0];
    // var b = list[1];
    // var c = list[2];
    // console.log(a, b, c);

    // ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
    // 本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

    // 数组解构 -> 对应下标解构  (从数组和对象中提取值，对变量进行赋值)

    // 完全解构 => 等号左右两边模式匹配
    // var list = [1, 2, 3];
    // var [a, b, c] = [1, 2, 3];
    // console.log(a, b, c);

    // 不完全解构 => 即等号左边的模式，只匹配一部分的等号右边的数组
    // var [a, b, c] = [1, 2, 3, 4];
    // console.log(a, b, c);

    // var [a, , c] = [1, 2, 3, 4];
    // console.log(a, c);


    // 解构不成功  => 默认返回undefined
    // var [a, b, c, d] = [1, 2, 3];
    // console.log(a, b, c, d);   // 1 2 3 undefined

    // 在解构过程中,可以给变量设置默认值   (解构不成功时,使用默认值)
    // d = d===undefined ? 0 :d;
    // var [a, b, c, d = 0] = [1, 2, 3];
    // console.log(a, b, c, d);  // 1 2 3 0

    // var [a, b, c, d = 0] = [1, 2, 3, null];
    // console.log(a, b, c, d);  // 1 2 3 null

    // var [a, b, c, d = 0] = [1, 2, 3, undefined];
    // console.log(a, b, c, d); // 1 2 3 0



    // 数组解构注意:  如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

    // 报错
    // var [a] = 1;
    // var [a] = NaN;
    // var [a] = true;
    // var [a] = null;
    // var [a] = undefined;
    // var [a] = {};

    // 可以
    // var [a, b, c] = "hello";
    // console.log(a, b, c);


    // 数组解构高级
    // 1. Rest参数(合并剩余参数) => ...扩展运算符的逆应用
    // var [a, b, ...list] = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    // // a => 1
    // // b => 4
    // // ...list =>  7, 2, 5, 8, 3, 6, 9  逆向推论:list = [ 7, 2, 5, 8, 3, 6, 9]
    // console.log(a, b, list);


    // 注意: Rest参数必须放在最后
    // var [a, ...list, b] = [1, 4, 7, 2, 5, 8, 3, 6, 9];
    // console.log(a, b, list);


    // 多维数组解构赋值
    var list = [1, 2, 3, [4, 5, [6]]]

    // 分步解构
    // var [a, b, c, d] = list;
    // console.log(a, b, c, d); // 1 2 3  [4, 5, [6]]

    // var [d1, d2, d3] = d; //  [4, 5, [6]]
    // console.log(d1, d2, d3); // 4 5 [6]

    // var [d31] = d3;
    // console.log(d31);

    // console.log(a, b, c, d1, d2, d31); // 1 2 3 4 5 6

    // 一步到位
    // var [a, b, c, [d1, d2, [d31]]] = list;
    // console.log(a, b, c, d1, d2, d31); // 1 2 3 4 5 6 

    var [a, b, c, [d, e, [f]]] = list;
    console.log(a, b, c, d, e, f);

</script>

</html>